<template>
    <base-card>
        <el-form label-position="right" ref="ruleFormRef" :model="formItem" label-width="auto"
            style="  --el-text-color-placeholder: #999999; " :rules='rules'>
            <div class=" topPackage">
                <div class="topRectangle"></div>
                <span>新增药品信息</span>
            </div>
            <el-divider />
            <p style=" font-size: 16px;font-weight: 500;">基础信息</p>

            <el-form-item label="药品名称" style="font-size: 13px; text-align: left; margin-bottom: 20px;" prop="name">
                <el-input v-model="formItem.name" placeholder="请输入" style="width: 577px; height: 40px;" />
            </el-form-item>


            <el-form-item label="药品图片"
                style="font-size: 13px; margin-bottom: 20px;  display: flex; align-items: center; " prop="image">
                <el-upload :action="`${baseURL}/images/upload`" :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    style="width: 221px; height: 118px; display: flex; justify-content: center; align-items: center; border: 1px solid #999999; background-color: #999999;">

                    <img v-if="formItem.image" :src="formItem.image" style="width: 221px; height: 118px;" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="药品分类" style="font-size: 13px; text-align: left; margin-bottom: 20px;" prop="type">
                <el-select v-model="formItem.type" placeholder="请选择" style="width: 200px ; height: 40px;">
                    <el-option label="请选择" />
                    <el-option label="处方药" value="处方药" />
                    <el-option label="非处方药" value="非处方药" />
                </el-select>
            </el-form-item>
            <el-form-item label="药品规格" style="font-size: 13px; text-align: left; margin-bottom: 20px;" prop="spec">
                <el-input v-model="formItem.spec" placeholder="请输入" style="width: 577px; height: 40px;" />
            </el-form-item>

            <el-form-item label="药品详情" style="font-size: 13px; text-align: left;  margin-bottom: 20px;" prop="detail">
                <el-input v-model="formItem.detail" placeholder="" style="width: 1004px ; height: 380px;" />
            </el-form-item>

            <el-form-item label="发布时间" style="font-size: 13px; text-align: left; margin-bottom: 20px;"
                prop="publishTime">
                <el-date-picker v-model="formItem.publishTime" type="date" placeholder="请选择"
                    style="width: 200px; height: 40px;" />
            </el-form-item>
            <el-form-item label="排序号" style="font-size: 13px; margin-bottom: 20px;" prop="sort">
                <el-input v-model="formItem.sort" placeholder="" style="width: 200px; height: 40px;" />
            </el-form-item>
            <el-divider />
            <div style="margin-left: 11px;">
                <el-button type="primary" @click="submitForm">
                    发布
                </el-button>
                <el-button @click="goBack"> 返回</el-button>
            </div>
        </el-form>
    </base-card>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { addMedicinesApi } from '../../api/medicine';
import { Plus } from '@element-plus/icons-vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const ruleFormRef = ref()
const router = useRouter()
const baseURL = import.meta.env.VITE_BASE_URL;
const goBack = () => {
    console.log('go back')
    router.back()
};
const submitForm = () => {
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            addMedicines();
        } else {
            ElMessage.error('请完善表单信息');
            return false;
        }
    });
};

const rules = reactive({
    name: [
        { required: true, message: '请输入药品名称', trigger: 'blur' }
    ],
    image: [
        { required: true, message: '请输入药品图片', trigger: 'blur' }
    ],
    type: [
        { required: true, message: '请输入药品分类', trigger: 'blur' }
    ],

    publishTime: [
        { required: true, message: '请输入药品时间', trigger: 'blur' }
    ],
    sort: [
        { required: true, message: '请输入药品排序', trigger: 'blur' }
    ],
    spec: [
        { required: true, message: '请输入药品规格', trigger: 'blur' }
    ],
    detail: [
        { required: true, message: '请输入药品详情', trigger: 'blur' }
    ]
});
const formItem = ref({});
const handleAvatarSuccess = (
    res
) => {
    console.log(formItem.value.image);

    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '添加成功',

        })
        // goBack()
        formItem.value.image = res.data;
    } else {
        ElMessage.error(res.message)
    }
}
function addMedicines() {
    addMedicinesApi({
        ...formItem.value,
    })
        .then(res => {
            if (res.data == 200) {
                ElMessage.success('添加药品成功');
            }
            goBack()
        })
}
</script>

<style lang="scss" scoped>
.topPackage {
    display: flex;
    margin-bottom: 20px;

    span {
        font-weight: 500;
        font-style: normal;
        font-size: 18px;
        color: rgba(51, 51, 51, 0.898039215686275);

    }
}

.topRectangle {
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    margin-right: 20px;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 30px;
    height: 30px;
    text-align: center;
}
</style>